// import router from '../routes'
// import indexTpl from '../../views/index.art'
import usersTpl from '../../views/users.art'
import usersListTpl from '../../views/users-list.art'

import pagination from '../../components/pagination'

import page from '../../databus/page' 

// const htmlIndex = indexTpl({})

import { addUser } from './add-user'
import { usersList as usersListModel } from '../../models/users-list'
// import { usersRemove as usersRemoveModel } from '../../models/users-remove'
import { remove } from '../common/remove'

let dataList = []

// 观察者
const _substribe = () => {
  $('body').off('changeCurrentPage').on('changeCurrentPage', (event, index) => {
    _list(index)
    page.setCurPage(index)
  })

  $('body').off('addUser').on('addUser', (e) => {
    _loadData()
  })
}

// 页面事件绑定
// const _methods = () => {
//   // 绑定删除事件-事件代理
//   $('#users-list').on('click', '.btn-remove',async function(e){
//     // 删除指定用户
//     let res = await usersRemoveModel($(this).data('id'))
//     alert(res.data.message)
//     _loadData()
//   })

//   // 登出路由绑定 
//   $('#users-signout').on('click', function(e) {
//     e.preventDefault()
//     signout()
//   })
// }

// 渲染数据&分页
function _list(pageNo){
  if(!dataList || !dataList.length) return
  let pageSize = page.pageSize
  const start = (pageNo - 1) * pageSize
  $('#users-list').html(usersListTpl({
    data: dataList.slice(start, start + pageSize)
  }))
  // 绑定删除事件
  // $('.btn-remove').on('click', (e) => {
  //   _remove(e.target.dataset.id)
  // })
}

// 加载用户列表数据
async function _loadData () {
  let res = await usersListModel()
  console.log(res)
  const list = res.data
  dataList = list
  // 分页
  pagination(list)
  let currentPage = page.curPage
  _list(currentPage)
}

// const index = (router) => {
//   const loadIndex = (res) => {
//     res.render(htmlIndex)

//     // window resize 让页面撑满（在页面加载完之后）
//     $(window, '.wrapper').resize()
    
//     // 填充用户列表
//     $('#content').html(usersTpl())
//     $('#btn-add-user').on('click', addUser)
    
//     // 初次渲染list
//     _loadData()

//     _methods()

//     _substribe()
//   }
//   return (req, res, next) => {
//     // $.ajax({
//     //   url: '/api/users/isAuth',
//     //   async: false,
//     //   dataType: 'json',
//     //   success(result) {
//     //     if(result.ret) {
//           loadIndex(res)
//     //     } else {
//     //       router.go('/signin')
//     //     }
//     //   }
//     // })
//   }
// }

// function signout () {
//   // $.ajax({
//   //   url: '/api/users/signout', // 接口，分类，操作
//   //   type: 'get',
//   //   headers: {
//   //     'X-Access-Token': localStorage.getItem('lg-token') || ''
//   //   },
//   //   dataType: 'json',
//   //   success(result) {
//   //     if(result.ret) {
//         localStorage.setItem('lg-token', '')
//         location.reload()
//   //     }
//   //   },
//   //   error(err) {
//   //   }
//   // })
// }

const listUser = (router) => {
  // console.log(1)
  return (req, res, next) => {
    next()
    res.render(usersTpl())
    // console.log(2)
    // 填充用户列表
    // $('#content').html(usersTpl())
    // $('#btn-add-user').on('click', addUser)
    addUser()
    // 初次渲染list
    _loadData()

    // _methods()
    remove({
      $box: $('#users-list'), 
      url: '/api/users',
      loadData: _loadData
    })

    _substribe()
  }
}

// export default index
export default listUser
